<template>
  <div class="nav-bar">
   <div class="header-left">
     <span v-if="!isActionPage">{{ pageTitle }}</span>
     <div class="action-left" v-else>
       <div @click="goBack" style="display: flex; justify-content: space-between; align-items: center; cursor: pointer">
         <el-icon :size="20"><Back /></el-icon>
         <span>返回</span>
       </div>
       <span class="title">{{ actionTitle }}</span>
     </div>
   </div>
    <div class="header-right">
      <el-switch
          title="切换主题"
          inline-prompt
          v-model="theme"
          active-color="#000000"
          @click="toggle()"
      >
      </el-switch>
      <div class="avatar-irem"> {{ userName }} </div>
      <img @click="logOut" src="../assets/btn_close@2x.png" />
    </div>
  </div>
</template>

<script setup name="Header">
import { storeToRefs } from 'pinia';
import { Back } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import {
  computed, onMounted, ref, watch,
} from 'vue';
import { useToggle } from '@vueuse/shared';
import { useDark } from '@vueuse/core';
import { userStore } from '../store/user.js';
import { useIndexData } from '../views/Layout/useIndexData.js';

const user = userStore();
const { userData } = storeToRefs(user);
const theme = ref(window.localStorage.getItem('useDarkKEY') === 'dark');
const userName = computed(() => (userData.value ? userData.value.data.name : JSON.parse(window.localStorage.getItem('userData')).data.name));
const { logOut } = useIndexData();
const router = useRouter();
function goBack() {
  router.go(-1);
}
const menuMap = new Map([
  ['userManagement', '员工管理'],
  ['categoryManagment', '分类管理'],
  ['foodManagment', '菜品管理'],
  ['packageManagment', '套餐管理'],
  ['orderDeatil', '订单明细'],
]);
const pageTitle = ref('员工管理');
watch(router.currentRoute, () => {
  pageTitle.value = menuMap.get(router.currentRoute.value.name);
});

const isActionPage = computed(() => ['add', 'edit'].includes(router.currentRoute.value.query?.page));
const actionTitle = computed(() => (router.currentRoute.value.query?.page === 'add' ? `添加${pageTitle.value.slice(0, 2)}` : `编辑${pageTitle.value.slice(0, 2)}`));
const isDark = useDark({
  // 存储到localStorage/sessionStorage中的Key 根据自己的需求更改
  storageKey: 'useDarkKEY',
  // 暗黑class名字
  valueDark: 'dark',
  // 高亮class名字
  valueLight: 'light',
});
const toggle = useToggle(isDark);
</script>

<style scoped lang="css">
.nav-bar {
  height: 64px;
  overflow: hidden;
  position: relative;
  background: var(--el-bg-color);
  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-left {
  padding-left: 22px;
  text-align: left;
  color: #333333;
  height: 64px;
  font-size: 16px;
  line-height: 64px;
  width: 300px;
  font-weight: 700;
  animation: opacity 500ms ease-out 800ms forwards;
}
.action-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.header-right{
  display: flex;
  justify-content: space-between;
  margin-right: 34px;
  height: 100%;
  line-height: 64px;
  color: #333333;
  font-size: 14px;
  width: 15%;
  align-items: center;
}
img {
  margin-left: 10px;
  width: 25px;
  height: 25px;
  cursor: pointer
}
.title {
  margin-left: 30px;
}
span {
  color: var(--el-text-color-primary)
}
.avatar-irem {
  color:  var(--el-text-color-primary)
}
:deep(.el-icon) {

  color: var(--el-text-color-primary)
}
</style>
